JavaScript AbortController: অ্যাসিঙ্ক্রোনাস অপারেশন বাতিলকরণে দক্ষতা অর্জন

আধুনিক ওয়েব ডেভেলপমেন্টে, অ্যাসিঙ্ক্রোনাস অপারেশন সর্বত্র বিদ্যমান। API থেকে ডেটা আনা, টাইমার সেট করা, এবং ব্যবহারকারীর ইন্টারঅ্যাকশন পরিচালনা করার জন্য এমন কোড ব্যবহার করা হয় যা স্বাধীনভাবে চলে এবং সম্ভাব্য দীর্ঘ সময় ধরে চলতে পারে। তবে, এমন কিছু পরিস্থিতি আসে যখন এই অপারেশনগুলো সম্পূর্ণ হওয়ার আগেই বাতিল করার প্রয়োজন হয়। এখানেই জাভাস্ক্রিপ্টের AbortController ইন্টারফেসটি কাজে আসে। এটি DOM অপারেশন এবং অন্যান্য অ্যাসিঙ্ক্রোনাস টাস্কগুলিতে বাতিলকরণের অনুরোধ জানানোর একটি পরিচ্ছন্ন এবং কার্যকর উপায় প্রদান করে।

বাতিলকরণের প্রয়োজনীয়তা বোঝা

প্রযুক্তিগত বিবরণে যাওয়ার আগে, আসুন বুঝি কেন অ্যাসিঙ্ক্রোনাস অপারেশন বাতিল করা গুরুত্বপূর্ণ। এই সাধারণ পরিস্থিতিগুলো বিবেচনা করুন:

• ব্যবহারকারীর নেভিগেশন: একজন ব্যবহারকারী একটি সার্চ কোয়েরি শুরু করেন, যা একটি API রিকোয়েস্ট ট্রিগার করে। যদি রিকোয়েস্টটি সম্পূর্ণ হওয়ার আগে তারা দ্রুত অন্য একটি পৃষ্ঠায় চলে যায়, তবে আসল রিকোয়েস্টটি অপ্রাসঙ্গিক হয়ে যায় এবং অপ্রয়োজনীয় নেটওয়ার্ক ট্র্যাফিক এবং সম্ভাব্য পার্শ্বপ্রতিক্রিয়া এড়াতে এটি বাতিল করা উচিত।
• টাইমআউট ম্যানেজমেন্ট: আপনি একটি অ্যাসিঙ্ক্রোনাস অপারেশনের জন্য একটি টাইমআউট সেট করেছেন। যদি অপারেশনটি টাইমআউট শেষ হওয়ার আগেই সম্পন্ন হয়, তবে অতিরিক্ত কোড এক্সিকিউশন রোধ করতে আপনার টাইমআউটটি বাতিল করা উচিত।
• কম্পোনেন্ট আনমাউন্ট করা: React বা Vue.js-এর মতো ফ্রন্ট-এন্ড ফ্রেমওয়ার্কে, কম্পোনেন্টগুলো প্রায়ই অ্যাসিঙ্ক্রোনাস রিকোয়েস্ট করে। যখন একটি কম্পোনেন্ট আনমাউন্ট হয়, তখন সেই কম্পোনেন্টের সাথে সম্পর্কিত যেকোনো চলমান রিকোয়েস্ট বাতিল করা উচিত যাতে মেমরি লিক এবং আনমাউন্ট করা কম্পোনেন্ট আপডেট করার কারণে সৃষ্ট ত্রুটি এড়ানো যায়।
• রিসোর্সের সীমাবদ্ধতা: রিসোর্স-সীমাবদ্ধ পরিবেশে (যেমন, মোবাইল ডিভাইস, এমবেডেড সিস্টেম), অপ্রয়োজনীয় অপারেশন বাতিল করলে মূল্যবান রিসোর্স মুক্ত হতে পারে এবং পারফরম্যান্স উন্নত হতে পারে। উদাহরণস্বরূপ, যদি ব্যবহারকারী পৃষ্ঠার সেই অংশটি স্ক্রল করে চলে যায় তবে একটি বড় ইমেজ ডাউনলোড বাতিল করা।

AbortController এবং AbortSignal-এর পরিচিতি

AbortController ইন্টারফেসটি অ্যাসিঙ্ক্রোনাস অপারেশন বাতিল করার সমস্যা সমাধানের জন্য ডিজাইন করা হয়েছে। এটি দুটি মূল উপাদান নিয়ে গঠিত:

• AbortController: এই অবজেক্টটি বাতিলকরণ সংকেত পরিচালনা করে। এর একটিই মেথড আছে, abort(), যা একটি বাতিলকরণের অনুরোধ জানানোর জন্য ব্যবহৃত হয়।
• AbortSignal: এই অবজেক্টটি একটি সংকেত প্রতিনিধিত্ব করে যে একটি অপারেশন বাতিল করা উচিত। এটি একটি AbortController-এর সাথে যুক্ত থাকে এবং যে অ্যাসিঙ্ক্রোনাস অপারেশনটি বাতিলযোগ্য হওয়া দরকার সেটিতে পাস করা হয়।

প্রাথমিক ব্যবহার: Fetch রিকোয়েস্ট বাতিল করা

আসুন একটি fetch রিকোয়েস্ট বাতিল করার একটি সহজ উদাহরণ দিয়ে শুরু করি:

            
const controller = new AbortController();
const signal = controller.signal;

fetch('https://api.example.com/data', { signal })
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    console.log('Data:', data);
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('Fetch aborted');
    } else {
      console.error('Fetch error:', error);
    }
  });

// To cancel the fetch request:
controller.abort();

            

              
                Copy
              
            
          

ব্যাখ্যা:

1. আমরা একটি AbortController ইনস্ট্যান্স তৈরি করি।
2. আমরা controller থেকে সংশ্লিষ্ট AbortSignal পাই।
3. আমরা fetch অপশনে signal পাস করি।
4. যদি আমাদের রিকোয়েস্টটি বাতিল করার প্রয়োজন হয়, আমরা controller.abort() কল করি।
5. .catch() ব্লকে, আমরা পরীক্ষা করি যে ত্রুটিটি একটি AbortError কিনা। যদি তাই হয়, আমরা জানি যে রিকোয়েস্টটি বাতিল করা হয়েছে।

AbortError পরিচালনা করা

যখন controller.abort() কল করা হয়, তখন fetch রিকোয়েস্টটি একটি AbortError দিয়ে রিজেক্ট হবে। আপনার কোডে এই ত্রুটিটি সঠিকভাবে পরিচালনা করা অত্যন্ত গুরুত্বপূর্ণ। এটি করতে ব্যর্থ হলে আনহ্যান্ডেলড প্রমিস রিজেকশন এবং অপ্রত্যাশিত আচরণ হতে পারে।

এখানে ত্রুটি পরিচালনার সাথে একটি আরও শক্তিশালী উদাহরণ দেওয়া হলো:

            
const controller = new AbortController();
const signal = controller.signal;

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data', { signal });
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    const data = await response.json();
    console.log('Data:', data);
    return data;
  } catch (error) {
    if (error.name === 'AbortError') {
      console.log('Fetch aborted');
      return null; // Or throw the error to be handled further up
    } else {
      console.error('Fetch error:', error);
      throw error; // Re-throw the error to be handled further up
    }
  }
}

fetchData();

// To cancel the fetch request:
controller.abort();

            

              
                Copy
              
            
          

AbortError পরিচালনার জন্য সেরা অভ্যাস:

• ত্রুটির নাম পরীক্ষা করুন: আপনি সঠিক ধরনের ত্রুটি পরিচালনা করছেন তা নিশ্চিত করতে সর্বদা error.name === 'AbortError' পরীক্ষা করুন।
• একটি ডিফল্ট মান রিটার্ন করুন বা পুনরায় থ্রো করুন: আপনার অ্যাপ্লিকেশনের যুক্তির উপর নির্ভর করে, আপনি একটি ডিফল্ট মান (যেমন, null) রিটার্ন করতে পারেন অথবা কল স্ট্যাকের উপরে ত্রুটিটি পরিচালনা করার জন্য পুনরায় থ্রো করতে পারেন।
• রিসোর্স পরিষ্কার করুন: যদি অ্যাসিঙ্ক্রোনাস অপারেশন কোনো রিসোর্স (যেমন, টাইমার, ইভেন্ট লিসেনার) বরাদ্দ করে থাকে, তবে AbortError হ্যান্ডলারে সেগুলি পরিষ্কার করুন।

AbortSignal দিয়ে টাইমার বাতিল করা

AbortSignal setTimeout বা setInterval দিয়ে তৈরি টাইমার বাতিল করতেও ব্যবহার করা যেতে পারে। এর জন্য একটু বেশি ম্যানুয়াল কাজ প্রয়োজন, কারণ বিল্ট-ইন টাইমার ফাংশনগুলো সরাসরি AbortSignal সমর্থন করে না। আপনাকে একটি কাস্টম ফাংশন তৈরি করতে হবে যা অ্যাবোর্ট সিগন্যালের জন্য শোনে এবং যখন এটি ট্রিগার হয় তখন টাইমারটি ক্লিয়ার করে।

            
function cancellableTimeout(callback, delay, signal) {
  let timeoutId;

  const timeoutPromise = new Promise((resolve, reject) => {
    timeoutId = setTimeout(() => {
      resolve(callback());
    }, delay);

    signal.addEventListener('abort', () => {
      clearTimeout(timeoutId);
      reject(new Error('Timeout Aborted'));
    });
  });

  return timeoutPromise;
}

const controller = new AbortController();
const signal = controller.signal;


cancellableTimeout(() => {
  console.log('Timeout executed');
}, 2000, signal)
.then(() => console.log("Timeout finished successfully"))
.catch(err => console.log(err));

// To cancel the timeout:
controller.abort();

            

              
                Copy
              
            
          

ব্যাখ্যা:

1. cancellableTimeout ফাংশনটি একটি কলব্যাক, একটি ডিলে এবং একটি AbortSignal আর্গুমেন্ট হিসেবে নেয়।
2. এটি একটি setTimeout সেট আপ করে এবং টাইমআউট আইডি সংরক্ষণ করে।
3. এটি AbortSignal-এ একটি ইভেন্ট লিসেনার যোগ করে যা abort ইভেন্টের জন্য শোনে।
4. যখন abort ইভেন্টটি ট্রিগার হয়, তখন ইভেন্ট লিসেনারটি টাইমআউট ক্লিয়ার করে এবং প্রমিসটি রিজেক্ট করে।

ইভেন্ট লিসেনার বাতিল করা

টাইমারের মতোই, আপনি ইভেন্ট লিসেনার বাতিল করতে AbortSignal ব্যবহার করতে পারেন। এটি বিশেষত কার্যকর যখন আপনি এমন একটি কম্পোনেন্টের সাথে সম্পর্কিত ইভেন্ট লিসেনারগুলো সরাতে চান যা আনমাউন্ট করা হচ্ছে।

            
const controller = new AbortController();
const signal = controller.signal;

const button = document.getElementById('myButton');

button.addEventListener('click', () => {
  console.log('Button clicked!');
}, { signal });

// To cancel the event listener:
controller.abort();

            

              
                Copy
              
            
          

ব্যাখ্যা:

1. আমরা addEventListener মেথডে একটি অপশন হিসেবে signal পাস করি।
2. যখন controller.abort() কল করা হয়, তখন ইভেন্ট লিসেনারটি স্বয়ংক্রিয়ভাবে সরানো হবে।

React কম্পোনেন্টে AbortController

React-এ, আপনি একটি কম্পোনেন্ট আনমাউন্ট হওয়ার সময় অ্যাসিঙ্ক্রোনাস অপারেশন বাতিল করতে AbortController ব্যবহার করতে পারেন। এটি মেমরি লিক এবং আনমাউন্ট করা কম্পোনেন্ট আপডেট করার কারণে সৃষ্ট ত্রুটি প্রতিরোধ করার জন্য অপরিহার্য। এখানে useEffect হুক ব্যবহার করে একটি উদাহরণ দেওয়া হলো:

            
import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    const controller = new AbortController();
    const signal = controller.signal;

    async function fetchData() {
      try {
        const response = await fetch('https://api.example.com/data', { signal });
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        const data = await response.json();
        setData(data);
      } catch (error) {
        if (error.name === 'AbortError') {
          console.log('Fetch aborted');
        } else {
          console.error('Fetch error:', error);
        }
      }
    }

    fetchData();

    return () => {
      controller.abort(); // Cancel the fetch request when the component unmounts
    };
  }, []); // Empty dependency array ensures this effect runs only once on mount

  return (
    

      {data ? (
        
Data: {JSON.stringify(data)}
      ) : (
        
Loading...
      )}
    
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

ব্যাখ্যা:

1. আমরা useEffect হুকের মধ্যে একটি AbortController তৈরি করি।
2. আমরা fetch রিকোয়েস্টে signal পাস করি।
3. আমরা useEffect হুক থেকে একটি ক্লিনআপ ফাংশন রিটার্ন করি। এই ফাংশনটি কম্পোনেন্ট আনমাউন্ট হওয়ার সময় কল করা হবে।
4. ক্লিনআপ ফাংশনের ভিতরে, আমরা fetch রিকোয়েস্টটি বাতিল করতে controller.abort() কল করি।

উন্নত ব্যবহারের ক্ষেত্র

AbortSignal চেইন করা

কখনও কখনও, আপনি একাধিক AbortSignal একসাথে চেইন করতে চাইতে পারেন। উদাহরণস্বরূপ, আপনার একটি প্যারেন্ট কম্পোনেন্ট থাকতে পারে যা তার চাইল্ড কম্পোনেন্টগুলিতে অপারেশন বাতিল করতে চায়। আপনি একটি নতুন AbortController তৈরি করে এবং এর সিগন্যাল প্যারেন্ট এবং চাইল্ড উভয় কম্পোনেন্টে পাস করে এটি অর্জন করতে পারেন।

থার্ড-পার্টি লাইব্রেরির সাথে AbortController ব্যবহার করা

আপনি যদি এমন একটি থার্ড-পার্টি লাইব্রেরি ব্যবহার করেন যা সরাসরি AbortSignal সমর্থন করে না, তাহলে লাইব্রেরির বাতিলকরণ পদ্ধতির সাথে কাজ করার জন্য আপনাকে আপনার কোড মানিয়ে নিতে হতে পারে। এর জন্য লাইব্রেরির অ্যাসিঙ্ক্রোনাস ফাংশনগুলোকে আপনার নিজের ফাংশনে মোড়ানো প্রয়োজন হতে পারে যা AbortSignal পরিচালনা করে।

AbortController ব্যবহারের সুবিধা

• উন্নত পারফরম্যান্স: অপ্রয়োজনীয় অপারেশন বাতিল করলে নেটওয়ার্ক ট্র্যাফিক, সিপিইউ ব্যবহার এবং মেমরি খরচ কমে যায়, যা উন্নত পারফরম্যান্সের দিকে নিয়ে যায়, বিশেষ করে রিসোর্স-সীমাবদ্ধ ডিভাইসগুলিতে।
• পরিচ্ছন্ন কোড: AbortController বাতিলকরণ পরিচালনা করার জন্য একটি মানসম্মত এবং মার্জিত উপায় প্রদান করে, যা আপনার কোডকে আরও পঠনযোগ্য এবং রক্ষণাবেক্ষণযোগ্য করে তোলে।
• মেমরি লিক প্রতিরোধ: আনমাউন্ট করা কম্পোনেন্টগুলির সাথে সম্পর্কিত অ্যাসিঙ্ক্রোনাস অপারেশন বাতিল করা মেমরি লিক এবং আনমাউন্ট করা কম্পোনেন্ট আপডেট করার কারণে সৃষ্ট ত্রুটি প্রতিরোধ করে।
• উন্নত ব্যবহারকারীর অভিজ্ঞতা: অপ্রাসঙ্গিক রিকোয়েস্ট বাতিল করা পুরনো তথ্য প্রদর্শন প্রতিরোধ করে এবং অনুভূত ল্যাটেন্সি কমিয়ে ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে পারে।

ব্রাউজার সামঞ্জস্যতা

AbortController আধুনিক ব্রাউজারগুলিতে, যেমন Chrome, Firefox, Safari এবং Edge-এ ব্যাপকভাবে সমর্থিত। সর্বশেষ তথ্যের জন্য আপনি MDN ওয়েব ডক্স-এর সামঞ্জস্যতা সারণী দেখতে পারেন।

পলিফিলস

পুরানো ব্রাউজারগুলির জন্য যেগুলি স্থানীয়ভাবে AbortController সমর্থন করে না, আপনি একটি পলিফিল ব্যবহার করতে পারেন। একটি পলিফিল হলো কোডের একটি অংশ যা পুরানো ব্রাউজারগুলিতে একটি নতুন ফিচারের কার্যকারিতা প্রদান করে। অনলাইনে বেশ কিছু AbortController পলিফিল উপলব্ধ আছে।

উপসংহার

AbortController ইন্টারফেসটি জাভাস্ক্রিপ্টে অ্যাসিঙ্ক্রোনাস অপারেশন পরিচালনার জন্য একটি শক্তিশালী টুল। AbortController ব্যবহার করে, আপনি আরও পরিচ্ছন্ন, পারফরম্যান্ট এবং শক্তিশালী কোড লিখতে পারেন যা বাতিলকরণকে সুন্দরভাবে পরিচালনা করে। আপনি API থেকে ডেটা আনুন, টাইমার সেট করুন বা ইভেন্ট লিসেনার পরিচালনা করুন, AbortController আপনার ওয়েব অ্যাপ্লিকেশনগুলির সামগ্রিক মান উন্নত করতে সহায়তা করতে পারে।

আরও পড়ার জন্য

• MDN ওয়েব ডক্স: AbortController
• WHATWG DOM লিভিং স্ট্যান্ডার্ড: AbortController